<template>
  <div class="EvaluateModal">
    <el-dialog :close-on-click-modal="false" title="订单评价" :visible.sync="visible" width="40%" :before-close="handleClose">
      <div class="shopModal">
        <template v-if="order">
          <div class="title">商品评价: </div>
          <div class="rate" v-for="(item,index) in order.orderGoods" :key="index">
            <img class="Img" :src="item.goods2title_title" alt="">
            <el-rate :disabled="isEvaluated" v-model="evaluation[index][`evaluation${index}`]" :colors="colors" show-text/>
          </div>
        </template>
        <div class="rate">
          <span>商家评价: </span>
          <el-rate :disabled="isEvaluated" v-model="shop_evaluate" :colors="colors" show-text />
        </div>
        <div class="yourDes">
          <p>您的评语: </p>
          <el-input :disabled="isEvaluated" type="textarea" rows="5" maxlength="160" show-word-limit clearable resize="none" v-model="you_evaluate" />
        </div>
      </div>
      <template #footer>
        <div class="buttons">
          <el-button type="primary" @click="() => { isEvaluated ? handleClose() : handleSure() }">确 定</el-button>
          <el-button plain @click="handleClose" v-if="!isEvaluated">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';

export default {
  name: '',
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    order: {
      type: [Boolean,Object],
      default: false
    },
    isEvaluated: {
      type: Boolean,
      default: false
    }
  },
  computed:{
    ...mapState({
      userInfo: state => state.user.userInfo,
    }),
    isAllEvaluated(){
      const arr = [];
      this.evaluation.forEach((item,index) => {
        arr.push(item[`evaluation${index}`] || false);
      });
      let isAllEvaluated = arr.reduce((a,b)=>a&&b);
      return isAllEvaluated;
    }
  },
  data () {
    return {
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      shop_evaluate: null,
      you_evaluate: '',
      evaluation: [],
    };
  },
  methods: {
    ...mapActions(['fetchAddEvaluation','fetchEvaluationDetail']),
    handleSure(){
      if(this.shop_evaluate && this.you_evaluate && this.isAllEvaluated){
        this.order.orderGoods.forEach((item,index) => {
          this.fetchAddEvaluation(
            {
              order_id: this.order.order_id,
              evaluation:{
                user_id: this.userInfo.user_id,
                goods_id: this.order.orderGoods[index].goods_id,
                order_code: this.order.order_code,
                content: this.you_evaluate,
                service: this.shop_evaluate,
                description: this.evaluation[index][`evaluation${index}`]
              }
            }
          );
        });
        this.clear();
        this.handleClose();
      }else{
        this.$message({
          type: 'error',
          message: '请输入完整信息。'
        })
      }
    },
    handleClose () {
      this.$emit('close');
      this.clear();
    },
    clear(){
      this.shop_evaluate = null;
      this.you_evaluate = '';
    }
  },
  watch:{
    order: {
      handler(newV){
        this.shop_evaluate = null,
        this.you_evaluate = null,
        this.evaluation.splice(0,this.evaluation.length);
        newV.orderGoods.forEach((good,index) => {
          this.evaluation.push( {[`evaluation${index}`]: null} );
        });
      },
      deep: true
    },
    isEvaluated(n){
        if(n){
          this.fetchEvaluationDetail({order_id: this.order.order_id}).then(res => {
            const { code, extend: { Detail: { evaluations } } } = res;
            this.you_evaluate = evaluations[0].evaluation_content;
            this.shop_evaluate = evaluations[0].evaluation_service
            this.evaluation.forEach((item,index) => {
              item[`evaluation${index}`] = evaluations[index].evaluation_description
            })
          });
        }
    }
  }
}
</script>
<style lang='scss' scoped src="./index.scss"/>
<style lang="scss">
.rate {
  .el-rate {
    height: auto;
    .el-rate__item {
      padding-right: 5px;
      i {
        font-size: 30px;
      }
    }
    .el-rate__text {
      font-size: 15px;
    }
  }
}
</style>